<template>
	<div class="topdiv">
		<ul>
			<li v-for="item in iconsList" :key="item.id">
				<router-link to="/">
					<img :src="item.imgURL" />
					<p>{{item.title}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
// public目录下所有的文件都是直接读取的
export default{
	name:'Icons',
	props:['propsicons'],
	data(){
		return {
			iconsList:[],
		}
	},
	watch:{
		propsicons(){
			this.iconsList = this.propsicons;
		}
	}
}
</script>

<style scoped>
*{
	text-decoration: none;
}
.icons{
	width: 100%;
	height: 3rem;
}
.topdiv{
	width: 100%;
	height: 3rem;
}
.topdiv ul li{
	float: left;
	text-align: center;
	width: 20%;
	line-height: 1rem;
}
.topdiv ul li img{
	margin-top: 1rem;
	height: 1.1rem;
}
.topdiv ul li P{
	margin-top: -0.3rem;
	line-height: 0.5rem;
	color: #000000;
}
</style>
